<div class="flex flex-col h-full">
  <div class="flex flex-col justify-center h-16">
    <span translate class="header-label font-bold pl-6 text-xl">
      {{ headerLabel }}
    </span>
  </div>
  <div class="flex flex-1 relative" #map>
    <div
      *ngIf="showProperties"
      [style.background]="getSecondaryColor(0.75)"
      class="z-10 absolute top-0 w-56 right-1/10 p-3 h-full max-w-full overflow-y-auto"
    >
      <div class="text-sm text-white" *ngFor="let property of getProperties()">
        <strong>{{ property[0] }}</strong
        >: {{ property[1] }}
      </div>
    </div>
  </div>
  <div class="flex items-center justify-end h-16 pr-6 pl-6">
    <div class="w-1/2 mb-1 mt-1">
      <ui-dropdown-selector
        [title]="footerLabel | translate"
        [choices]="footerList"
        (selectValue)="selectValue($event)"
        [selected]="selectedValue"
        ariaName="search-sort-by"
        *ngIf="footerList.length > 0"
      >
      </ui-dropdown-selector>
      <span
        *ngIf="footerList.length === 0"
        class="block uppercase tracking-wide text-gray-800 text-xs font-bold whitespace-no-wrap text-right"
      >
        {{ footerLabel | translate }} {{ selectedValue | translate }}
      </span>
    </div>
  </div>
</div>
